<template>
  <div class="card-list page">
    <van-nav-bar
        title="银行卡管理"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push({ name: 'BindCard'})"
    >
      <template #right>
        <i v-if="!isBank" class="van-badge__wrapper van-icon van-icon-plus right-icon" style="color: #fa59b5"/>
      </template>
    </van-nav-bar>
    <div class="wrapper">
      <div v-if="!isBank" class="tips">暂未绑定银行卡，请点击右上角 ‘+’ 添加</div>
      <div v-else class="bank">
        <div class="info">
          <div class="row-content text-right" @click="$router.push({ name: 'CardDetail' })">查看详情</div>
          <div class="row-content"><span>{{ bank.bankinfo }}</span></div>
          <div class="row-content">{{ userInfo.name }}</div>
          <div class="row-content"><span>{{ bank.bankid }}</span></div>
        </div>
      </div>
    </div>
    <div class="unbind" style="display: none;">
      <div class="head van-hairline--bottom">
        <div class="icon">
          <i class="van-badge__wrapper van-icon van-icon-cross" style="color: rgb(151, 151, 153); font-size: 20px;"/>
        </div>
      </div>
      <div class="remark">
        *在您需要更换银行卡之前，请先解绑当前银行卡，再绑定新的银行卡
      </div>
      <div class="remark">*解绑银行卡需要先验证您当前的手机号</div>
      <div class="input-group van-hairline--bottom">
        <div class="van-cell van-cell--center van-field input-row">
          <div class="van-cell__title van-field__label" style="width: 7em;"><span>手机号码</span></div>
          <div class="van-cell__value van-field__value">
            <div class="van-field__body">
              <div class="van-field__control van-field__control--custom"><span>188****000001</span>
              </div>
            </div>
          </div>
        </div>
        <div class="van-cell van-cell--center van-field input-row">
          <div class="van-cell__title van-field__label" style="width: 7em;"><span>短信验证</span></div>
          <div class="van-cell__value van-field__value">
            <div class="van-field__body"><input type="text" class="van-field__control" placeholder="请输入短信验证码">
              <div class="van-field__button">
                <div class="sms-btn">获取短信验证码</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button type="button" class="van-button van-button--default van-button--normal submit-btn"
      >
        <div class="van-button__content"><span class="van-button__text">确定解绑</span></div>
      </button>
    </div>
  </div>
</template>
<script>
import {getCardInfo} from "@api/Card";
import {mapGetters} from "vuex";

export default {
  name: "CardList",
  computed: mapGetters(["userInfo"]),
  data: function () {
    return {
      isBank: false,
      bank: {}
    }
  },
  activated() {
    this.cardInfo();
  },
  methods: {
    cardInfo: function () {
      getCardInfo().then(v => {
        this.isBank = v.data.is_bank;
        this.bank = v.data.info;
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.card-list {
  bottom: 0;
  background-color: #fcf0fa
}

.card-list .wrapper {
  height: calc(100% - 1.22667rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.card-list .wrapper .bank {
  min-height: 5.63333rem;
  padding: 0 .26667rem;
  display: flex;
  align-items: center;
  flex-direction: column
}

.card-list .wrapper .bank .info {
  margin: .53333rem auto;
  width: 100%;
  flex: 1;
  color: #fa59b5;
  background-color: #f5dcf1;
  box-shadow: 0 .05333rem .21333rem 0 rgba(0, 0, 0, .2);
  border-radius: .13333rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: .53333rem;
  padding-top: .26667rem
}

.card-list .wrapper .bank .info .text-right {
  justify-content: flex-end !important;
  color: #000 !important;
  font-weight: 700
}

.card-list .wrapper .bank .info .row-content {
  margin: .26667rem 0;
  line-height: .48rem;
  font-size: .37333rem;
  color: #000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: .53333rem
}

.card-list .wrapper .bank .info .row-content span:first-child {
  font-weight: 700
}

.card-list .wrapper .bank .info .row-content img {
  width: 2.66667rem;
  height: 2.66667rem;
  -o-object-fit: cover;
  object-fit: cover
}

.card-list .wrapper .bank .operating {
  padding: 0 .32rem;
  line-height: .85333rem;
  background-color: #e38afb;
  color: #fcf0fa;
  font-size: .37333rem;
  border-radius: .16rem
}

.card-list .wrapper .add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #fff;
  height: 3.2rem
}

.card-list .wrapper .add-card span {
  margin-left: .26667rem;
  font-size: .42667rem
}

.card-list .wrapper .tips {
  margin: .4rem .26667rem;
  font-size: .32rem;
  color: #979799
}

.card-list .mask {
  background-color: rgba(0, 0, 0, .3)
}

.card-list .unbind {
  padding: 0 .26667rem;
  border-radius: .26667rem .26667rem 0 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fcf0fa
}

.card-list .unbind .head {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.card-list .unbind .head .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.06667rem;
  height: 1.06667rem
}

.card-list .unbind .remark {
  margin-top: .26667rem;
  font-size: .34667rem;
  line-height: .48rem;
  color: #ff253f
}

.card-list .unbind .input-group {
  margin-top: .26667rem
}

.card-list .unbind .input-group .input-row {
  padding: .26667rem 0
}

.card-list .unbind .input-group .input-row .sms-btn {
  padding: 0 .21333rem;
  line-height: .8rem;
  font-size: .32rem;
  color: #fff;
  background-color: #fa59b5;
  border-radius: .08rem
}

.card-list .unbind .input-group .input-row .sms-time {
  line-height: .8rem;
  margin-right: .26667rem;
  font-size: .37333rem;
  color: #ff253f
}

.card-list .unbind .submit-btn {
  margin: .26667rem 2%;
  width: 96%;
  height: 1.17333rem;
  border-radius: .66667rem;
  background-color: #cacacc;
  color: #fff;
  font-size: .42667rem;
  font-weight: bolder;
  border: none
}

.card-list .unbind .submit-btn.active {
  color: #fff;
  background: linear-gradient(90deg, #e38afb, #fa59b5)
}
</style>
